<template>
    <div class="manuscript">
        <van-tabs v-model="active">
            <van-tab title="全部">
                <div class="manuscript_list" >
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!contribution">暂无稿件</div>
                        <li v-for="item in contribution">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <div class="status_lists" style="display: none;">{{item.status_list}}</div>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="unpaid(item)">费用支付</span></div>
                        </li>
                    </ul>
                </div>
            </van-tab>
            <van-tab title="投稿中">
                <div class="manuscript_list">
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!submit">暂无稿件</div>
                        <li v-for="item in submit">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="uncheck">费用支付</span></div>
                        </li>

                    </ul>
                </div>
            </van-tab>
            <van-tab title="返修中">
                <div class="manuscript_list">
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!rework">暂无稿件</div>
                        <li v-for="item in rework">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="paid">费用支付</span></div>
                        </li>

                    </ul>
                </div>
            </van-tab>
            <van-tab title="审稿中">
                <div class="manuscript_list">
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!review">暂无稿件</div>
                        <li v-for="item in review">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="uncheck">费用支付</span></div>
                        </li>

                    </ul>
                </div>
            </van-tab>
            <van-tab title="已录用">
                <div class="manuscript_list">
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!employment">暂无稿件</div>
                        <li v-for="item in employment">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="paid"><router-link :to="{path:'/registerf',query:{ id:item.mid}}">费用支付</router-link></span></div>
                        </li>

                    </ul>
                </div>
            </van-tab>
            <van-tab title="撤/拒稿">
                <div class="manuscript_list">
                    <p class="manuscript_toast">如需操作修改、撤稿等业务，请在电脑登录科奥网完成</p>
                    <ul class="manuscript_box">
                        <div class="available" v-if="!withdraw">暂无稿件</div>
                        <li v-for="item in withdraw">
                            <h3 class="manuscript_title">{{item.meetingone.title}}</h3>
                            <div class="manuscript_msg">
                                <div class="manuscript_num"><span>稿件编号：</span><span>{{item.number}}</span></div>
                                <div class="thesis"><span>论文标题：</span><span>{{item.title}}</span></div>
                                <div v-if="item.status_list == 'C'"><span>返修截稿日期：</span><span>{{item.meetingone.end_time}}</span></div>
                                <div v-if="item.status_list == 'E'"><span>录用日期：</span><span>{{item.meetingone.start_time}}</span></div>
                                <div class="status_ok">
                                    <div v-if="item.status_list == 'E'" style="display: none;"><span>投稿历史：</span>
                                        <span v-if="item.submission_status == '1'">一投</span>
                                        <span v-else-if="item.submission_status == '2'">二投</span>
                                        <span v-else>三投</span>
                                    </div>
                                    <div class="manuscript_history" v-else><span>投稿历史：</span><span>一投</span></div>
                                    <div :class="[ item.status_list == 'E' ? 'leftbox' : 'manuscript_history']"><span>稿件状态：</span>
                                        <span class="status_font" v-if="item.status_list == 'A'">投稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'B'">审稿中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'C'">返修中</span>
                                        <span class="status_font" v-else-if="item.status_list == 'D'">已拒稿</span>
                                        <span class="status_font" v-else>已录用</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>订单状态：</span>
                                        <span class="status_font" v-if="item.cost_status == 'N'">待缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'Y'">已缴费</span>
                                        <span class="status_font" v-else-if="item.cost_status == 'R'">退款中</span>
                                        <span class="status_font" v-else>已退款</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: left;"><span>见刊状态：</span>
                                        <span class="status_font" v-if="item.pub_status == 'N'">未见刊</span>
                                        <span class="status_font" v-else>已见刊</span>
                                    </div>
                                    <div class="manuscript_history" v-if="item.status_list == 'E'" style="text-align: right;"><span>检索状态：</span>
                                        <span class="status_font" v-if="item.retrieval_status == 'N'">未检索</span>
                                        <span class="status_font" v-else>已检索</span>
                                    </div>
                                </div>
                            </div>
                            <div class="manuscript_btn"><span><router-link :to="{path:'/officer',query:{ id:item.mid}}">会议详情</router-link></span><span @click="uncheck">费用支付</span></div>
                        </li>
                    </ul>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import { RequestPost } from '@/api/http.js'
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                contribution:'',
                submit:'',
                review:'',
                rework:'',
                employment:'',
                withdraw:'',
                active: 0
            };
        },
        created(){
            let storage = JSON.parse(localStorage.getItem('login'));
            let submit = [];      //投稿中
            let review = [];      //审稿中
            let rework = [];      //返修中
            let withdraw = [];    //拒稿、撤稿
            let employment = [];  //已录用

            RequestPost({
                url: '/user/mypaper',
                data:{ userid:storage.id }
            }).then((res)=>{
                this.contribution = res.data.data;
                for(let i=0;i<res.data.data.length;i++){
                    if(res.data.data[i].status_list == 'A'){
                        submit.push(res.data.data[i]);
                        localStorage.setItem('submit',JSON.stringify(submit))
                    }else if(res.data.data[i].status_list == 'B'){
                        review.push(res.data.data[i]);
                        localStorage.setItem('review',JSON.stringify(review))
                    }else if(res.data.data[i].status_list == 'C'){
                        rework.push(res.data.data[i]);
                        localStorage.setItem('rework',JSON.stringify(rework))
                    }else if(res.data.data[i].status_list == 'D'){
                        withdraw.push(res.data.data[i]);
                        localStorage.setItem('withdraw',JSON.stringify(withdraw))
                    }else{
                        employment.push(res.data.data[i]);
                        localStorage.setItem('employment',JSON.stringify(employment))
                    }
                }
                this.submit = JSON.parse(localStorage.getItem('submit'));
                this.review = JSON.parse(localStorage.getItem('review'));
                this.rework = JSON.parse(localStorage.getItem('rework'));
                this.withdraw = JSON.parse(localStorage.getItem('withdraw'));
                this.employment = JSON.parse(localStorage.getItem('employment'));
                console.log(this.submit);
            })
        },
        components:{
            Toast
        },
        methods:{
            unpaid(e){
                if(e.status_list == 'E'){
                    this.paid();
                }else{
                    this.uncheck();
                }
            },
            uncheck(){
                Toast('等待稿件录取');
            },
            paid(){
                this.$router.push('/registerf');
            }
        }
    }
</script>

<style >
    .available{text-align: center;font-size: 14PX;color: #eee;text-decoration: underline;padding-top: 20%;}
    .leftbox{text-align: left;}
    .manuscript .van-tabs__line{background-color:#557ae4;bottom: 0;}
    .manuscript .van-tab{flex-basis: 20%!important;}
    .manuscript .van-tab--active{flex-basis: 20%!important;color: #557ae4;}
    .manuscript .van-tabs--line .van-tabs__wrap{height: auto!important;}
    .manuscript .van-tabs__content{margin-top: 40px;}
    .manuscript .van-tab{height: 0.8rem;line-height: 0.8rem;}
    .manuscript .van-ellipsis{font-size: 0.4rem;margin-top: 0.2rem;}
    .manuscript_list{width: 92%;padding-top: 0.2rem;font-size: 0.32rem;margin-left: 6%;}
    .manuscript_toast{color: red;text-align: right;padding-right: 0.4rem;margin-bottom: 10px;}
    .manuscript_box{margin-right: 0.4rem;}
    .manuscript_box li{border-radius: 3px;margin-bottom: 0.4rem;box-shadow: 1PX 2PX 18PX gainsboro;}
    .manuscript_title{border-radius:0.09rem;padding: 0.4rem;text-align: center;background: #557ae4;color: #fff;font-size: 0.4rem;overflow: hidden;
        white-space: nowrap;text-overflow: ellipsis;}
    .manuscript_msg{font-size: 0.34rem;border-left: 1px solid gainsboro;border-right: 1px solid gainsboro;box-sizing: border-box;padding: 0.4rem 1rem 0.08rem 1rem;width: 100%;}
    .manuscript_msg div{margin-bottom: 0.34rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-top: 0.1rem;}
    .manuscript_num span:last-child{color: gainsboro;}
    .thesis span:last-child{font-weight: bold;}
    .status,.status_ok{width: 100%; margin-bottom: 10px;}
    .status_ok .manuscript_history:nth-child(2n-1){text-align: left;}
    .status_ok .manuscript_history:nth-child(2n){text-align: right;}
    .status div,.status_ok div{width: 50%;float: left;}
    .manuscript_status{text-align: right;}
    .status_font{color: red;}
    .manuscript_btn{border-radius:0 0 0.09rem 0.09rem;width: 100%;box-sizing: border-box;border-right:0.02rem  solid gainsboro;border-left:0.02rem  solid gainsboro;}
    .manuscript_btn span{width: 50%;border:0.02rem  solid gainsboro;border-left: none;border-right: none; display: inline-block;text-align: center; color: #557ae4;font-size: 0.36rem;font-weight: bold;padding: 0.36rem 0;box-sizing: border-box;}
    .manuscript_btn span:last-child{width: 50%;display: inline-block;text-align: center;color: #557ae4;font-size: 0.36rem;font-weight: bold;padding: 0.36rem 0;box-sizing: border-box;background: #eee;}
</style>